<form [formGroup]="form">

  <table id="bizcanvas" cellspacing="0" border="1">
    <!-- Upper part -->
    <tr>
      <td colspan="2" rowspan="2">
        <h4>Key Partners</h4>
        <mat-form-field>
          <input matInput class="table-input" placeholder="" formControlName="keyPartners">
        </mat-form-field>
        {{form.controls.keyPartners.value}}
      </td>
      <td colspan="2">
        <h4>Key Activities</h4>
        <mat-form-field>
          <input matInput class="table-input" placeholder="" formControlName="keyActivities">
        </mat-form-field>
        {{form.controls.keyActivities.value}}
      </td>
      <td colspan="2" rowspan="2">
        <h4>Value Proposition</h4>
        <mat-form-field>
          <input matInput class="table-input" placeholder="" formControlName="valueProposition">
        </mat-form-field>
        {{form.controls.valueProposition.value}}
      </td>
      <td colspan="2">
        <h4>Customer Relationship</h4>
        <mat-form-field>
          <input matInput class="table-input" placeholder="" formControlName="customerRelationship">
        </mat-form-field>
        {{form.controls.customerRelationship.value}}
      </td>
      <td colspan="2" rowspan="2">
        <h4>Customer Segments</h4>
        <mat-form-field>
          <input matInput class="table-input" placeholder="" formControlName="customerSegments">
        </mat-form-field>
        {{form.controls.customerSegments.value}}
      </td>
    </tr>

    <!-- Lower part -->
    <tr>
      <td colspan="2">
        <h4>Key Resources</h4>
        <mat-form-field>
          <input matInput class="table-input" placeholder="" formControlName="keyResources">
        </mat-form-field>
        {{form.controls.keyResources.value}}
      </td>
      <td colspan="2">
        <h4>Channels</h4>
        <mat-form-field>
          <input matInput class="table-input" placeholder="" formControlName="channels">
        </mat-form-field>
        {{form.controls.channels.value}}
      </td>
    </tr>
    <tr>
      <td colspan="5">
        <h4>Cost Structure</h4>
        <mat-form-field>
          <input matInput class="table-input" placeholder="" formControlName="costStructure">
        </mat-form-field>
        {{form.controls.costStructure.value}}
      </td>
      <td colspan="5">
        <h4>Revenue Streams</h4>
        <mat-form-field>
          <input matInput class="table-input" placeholder="" formControlName="revenueStreams">
        </mat-form-field>
        {{form.controls.revenueStreams.value}}
      </td>
    </tr>
  </table>
</form>

<div>
  <button mat-button matStepperPrevious>Back</button>
  <button mat-button matStepperNext (click)="submitCanvasForm()">Next</button>
</div>
